<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery Maps</title>
		<style type="text/css">
			v\:* { behavior:url(#default#VML);}
		</style>
		<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAApCYnM8S-TSRBhQk16Ynr4BQsdKsyZnhdiIFVYLirST5eeJJrrBSLEOe2KFlwraCMKFXFl41xy8sfMw" type="text/javascript"></script>
		<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAApCYnM8S-TSRBhQk16Ynr4BQsdKsyZnhdiIFVYLirST5eeJJrrBSLEOe2KFlwraCMKFXFl41xy8sfMw" type="text/javascript"></script>
		<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=ZYUn2tzV34GgW8J17pi3Gs_HoHGntvd.3km8IQmp.sLKNa8GYwVKyei4Ld6VonBeHHNqBNL9EXA-"></script>
		
		<script src="jquery.js" type="text/javascript"></script>
		<script src="chili-1.7.pack.js" type="text/javascript"></script>
		<script src="jquery.jmaps.js" type="text/javascript"></script>

		<script type="text/javascript">
			$('document').ready(function(){
				$("#gmap").jmap();
				$("#gmap2").jmap({provider: "yahoo"});

			$("a.showcode").bind("click", function(){
				var showdiv = $(this).attr("href");
				$(showdiv).toggle("fast");
				return false;
			});
		});
	</script>
	<style type="text/css">
	*, body { margin: 0, 10px; padding: 0; }
	p, ul { margin:10px; padding:10px;}
	pre {width: 80%; text-align:left; margin:0 auto; padding:1px; overflow:hide}
	.jscom, .mix htcom   { color: #4040c2; }
	.com      { color: green; }
	.regexp   { color: maroon; }
	.string   { color: teal; }
	.keywords { color: blue; }
	.global   { color: #008; }
	.numbers  { color: #880; }
	.comm     { color: green; }
	.tag      { color: blue; }
	.entity   { color: blue; }
	.string   { color: teal; }
	.aname    { color: maroon; }
	.avalue   { color: maroon; }
	.jquery   { color: #00a; }
	.plugin   { color: red; }
	</style>
	</head>
	<body>
	
	
	<div style="width:100%; height:131px; background:url('images/header.png') #000 no-repeat;" /><span style="float:right;color:#fff;">jQuery Maplet is a plugin for jQuery that provide easy-to-use Google Map functionality.</span></div>
	<p>
	<strong>A jQuery Plugin for Google Maps</strong><br />
	Author: <span class="hcard"><span class="fn">Tane Piper</span></span> (digitalspaghetti at gmail dot com).  With special thanks Dave Cardwell (who helped on getting this plugin to work).<br />
	Licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="licence">MIT License</a>.<br />
	For Google Maps and AJAX Search API's, check <a href="http://api.google.com">Google API Docs</a>.
	</p>

	<ul>
		<li><a href="#changelog">Changelog</a></li>
		<li><a href="#known-todo">Known Bugs & To Do</a></li>
		<li><a href="#useage">Useage</a></li>
		<li><a href="#example">Example</a></li>
		<li><a href="#demo">Demo</a></li>
		<li><a href="#download">Download</a></li>
	</ul>

	<a name="changelog"><h2>Changelog</h2></a>
	
	<ul>
		<li>Version 1.3
			<ul>
				<li>Added support for creating Yahoo! Maps, can create Map, Satallite or Hybrid.</li>
				<li>Added support for creating points on Yahoo! maps.</li>
				<li>Added support for creating Polylines on Yahoo! maps.</li>
				<li>Added support for GeoRSS files on both Yahoo! and Google maps, as well as existing KML support for Google, method name was changed from .addKml to .addRss</li>
				<li>Moved directions search out of main namespace, now function that is called from within plugin by providing fields</li>
				<li>Added Yahoo! Geocoding support</li>
			</ul>
		</li>
		<li>Version 1.2
			<ul>
				<li>Moved GClientGeocoder into searchAddress method</li>
				<li>Fixed bug in searchAddress method regarding getPoint().</li>
			</ul>
		
		</li>
		<li>Version 1.1
			<ul>
				<li>Changed name to remove Google from main name - namespace now .jmap.</li>
				<li>Added additional options:
					<ul>
						<li>Add map dragging enable/disable.</li>
						<li>Add scroll wheel zooming.</li>
						<li>Add smooth continuous zooming (on certain browsers).</li>
						<li>Added clean unloading of Google objects.</li>
					</ul>
				</li>
				<li>Added .addPoly method.  Allows the creation of polylines on the map.</li>
				<li>Added .addKml support for rendering KML Files.</li>
				<li>Added .directions Driving Direction support.</li>
			</ul>
		</li>
		<li>Version 1.0
		<ul>
			<li>Initial version</li>
			<li>Creates Google Map</li>
			<li>Add points to map</li>
			<li>Takes address or postcode, Geocodes and centers map.  Also creates a draggable marker</li>
		</ul>
		</li>
	</ul>
	</p>
	
	<a name="known-todo"><h2>Known Bugs &amp; To Do</h2></a>
	<p>
		<strong>Known Bugs</strong>
		<ul>
			<li>Removing point does not work on Yahoo! Maps (YEvent for MouseDoubleClick fails)</li>
		</ul>
	</p>
	<p>
		<strong>To Do</strong>
		<ul>
			<li>Add in custom icon support for points.</li>
			<li>Add support for Google Points Manager</li>
			<li>Add support for overlays</li>
		</ul>
		Don't see anything here you would like, add it to the <a href="http://code.google.com/p/jmaps/issues/list">Wishlist</a>
	</p>
	
	<a name="useage"><h2>Useage</h2></a>
	<p>
		
		To use jQuery maps - first you must have jQuery.  This plugin has been tested with version 1.1.3 on FireFox2 on Ubuntu 7.04.
	</p>
	<p>
		To initialise this, you need to include the JS files in your HTML header.
	</p>
	<p>
		<a class="showcode" href="#jsinclude">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="jsinclude"
		<code class="mix">
		&lt;script src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY"type="text/javascript">&lt;/script>
 		&lt;script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEY"type="text/javascript">&lt;/script>
 		&lt;script src="jquery.js"type="text/javascript">&lt;/script>
 		&lt;script src="jquery.jmap.js"type="text/javascript">&lt;/script>
		</code>
		</pre>
	</p>
	<a name="example"><h2>Examples</h2></a>
	<p>
		First of all, you need to create your basic HTML page.  This requires a DIV
		for your map.  You can also include other fields - for example, to do Geocoding.
	</p>
	<p>
		<a class="showcode" href="#basicpage">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="basicpage">
		<code class="mix">
			&lt;div id="gmap" style="float:left;width:800px;height:400px;">&lt;/div>
			&lt;div style="float:left;width:15%">
				&lt;strong>Find Address&lt;/strong>
				&lt;input type="text" id="Address" />
				&lt;input type="submit" id="findaddress" />
			&lt;/div>
		</code>
		</pre>
	</p>
	
	<p>
		You next need to initialise your map.  Below is a demo of a default map, however there are several options you can configure.
		The below demo will initialise a full map, plus will allow you to geocode an address.	
	</p>
	<p>
		By default, when you geocode an address, the map will center on the position and create a dragable point.  When you drag the
		point around, a information bubble will show with the updated Latitude and Longitude data.
	</p>
	<p>
		<h4>Basic Usage</h4>
		<a class="showcode" href="#basicinit">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="basicinit">
		<code class="mix">
			$('document').ready(function(){ 
				$('#gmap').jmap();
			});
		</code>
		</pre>
	</p>
	<p>
		<h4>With full options.  Note these are default</h4>
		<a class="showcode" href="#fulloptions">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="fulloptions">
		<code class="mix">
			$('document').ready(function(){ 
				$('#gmap').jmap({
					maptype: G_HYBRID_TYPE,
					center: [55.958858,-3.162302],
					zoom: 12,
					control: "small",
					showtype: true,
					showoverview: true,
					dragging: true,
					scrollzoom: true,
					smoothzoom: true,
					searchfield: "#Address",
					searchbutton: "#findaddress"
				},settings);
				});
			});
		</code>
		</pre>
	</p>
	<p>
		To add a point to the page (for example from a database) you can use the addPoint method.  If you would like to try this out
		now, you can copy the below code into the Firebug console.
	</p>
	<p>
		<a class="showcode" href="#addpoint">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="addpoint">
		<code class="mix">
				$('#gmap').addPoint('55.948286','-3.200111', 'Point1', false, false);
		</code>
		</pre>
	</p>
	<ul>
		<li>Latitude: Decimel</li>
		<li>Longitude: Decimel</li>
		<li>Bubble HTML: Text</li>
		<li>Draggable: Boolean</li>
		<li>Deleteable: Boolean (To delete, double click the point)</li>
	</ul>
	<h3>Polylines</h3>
	<p>
		To add a Polyline to the map, you need to construct a GPolyline array.  An example of this would be getting directions from a database.  You can control the color of the line, as well as the width and opacity.  Note opacity is between 0.1.
	</p>
	<p>
		<a class="showcode" href="#polyline">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="polyline">
		<code class="mix">
				&lt;script type="text/javascript">
					var polyline = new GPolyline([
    						new GLatLng(55.958387, -3.162367),
    						new GLatLng(55.95189103287788, -3.18878173828125),
    						new GLatLng(55.9447781445014, -3.21624755859375)
					], "#FF0000", 10,1);
				&lt;/script>
		</code>
		</pre>
	</p>
	<p>
		To initalise it, you use the .addPoly method.  You can easily bind this to an event such as a click, like below:
	<p>
		<a class="showcode" href="#renderpolyline">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="renderpolyline">
		<code class="mix">
				$('a.addpoly').bind('click', function(){
					$('#gmap').addPoly(polyline);
				});
		</code>
		</pre>
	</p>
	<h3>KML Files</h3>
	<p>
		To render a KML File on top of the page, you simply use the code below.  This loads details down Downtown Chicago, and centers
		the map on it.
	<p>
		<a class="showcode" href="#renderkml">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="renderkml">
		<code class="mix">
				$("#gmap2").addKml("http://mapgadgets.googlepages.com/cta.kml");	
				$("#gmap2").myMap().setCenter(new GLatLng(41.88414, -87.63238), 10);
		</code>
		</pre>
	</p>
	<h3>Driving Directions</h3>
	<p>
		To draw driving directions on the map, and provide text details, create a map, with a blank div for directions, you can
		then use the below code: 
	<p>
		<a class="showcode" href="#directions">Show Code</a>
		<pre style="background-color:#aaa;border:2px solid #000;display:none" id="directions">
		<code class="mix">
				$("#gmap").directions("from: New York to: Toronto" , "directions");
		</code>
		</pre>
	</p>
	
	<a name="demo"><h2>Demos</h2></a>
	<div id="gmap" style="float:left;width:800px;height:400px;"></div>

	<div style="float:left;width:15%">
		<strong>Enter an address, zip or postcode below to find the location.</strong>
		<input type="text" id="Address" /><br />
		<input type="submit" value="Find Address" id="findaddress" />
		<br />
		From: <input type="text" id="from" /><br />
		To: <input type="text" id="to" /><br />
		<input type="submit" value="Get Directions" id="getDirections" />
		<div id="mydirections" style="max-height:250px; overflow:auto;"></div>
	</div>
	<br style="clear:both;" />
	<h2><span style="color:red">New</span>: Yahoo! Maps Support</h2>
	<div id="gmap2" style="float:left;width:800px;height:400px;"></div>
	<div style="float:left;width:15%">
	</div>
	<br style="clear:both;" />
	<a name="download"><h2>Download</h2></a>
		<strong>jQuery Google Map Application Version 1.3</strong>
		<ul>
		<li><a href="http://jmaps.googlecode.com/files/jquery.jmaps.1-3.js">Unpacked Version</a></li>
		<li><a href="http://jmaps.googlecode.com/files/jquery.jmaps.packed.1-3.js">Packed Version</a></li>
		</ul>
	</body>
</html>
